<div class="row" id="title">
  <!-- <div class="col-sm">
    <h1 translate lib="web">files</h1>
  </div> -->
  <div class="col-sm"></div>
  <div class="col-sm text-right">
    <em class="fas fa-cog fa-spin" ng-show="ctrl.loading==true"></em>
  </div>
</div>

<style>
  #myProgress {
    width: 100%;
    background-color: grey;
  }

  #myBar {
    width: 1%;
    height: 30px;
    color: white;
    text-align: center;
    font-weight: bold;
    background-color: green;
  }
</style>
<div ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>
<form action="/upload" method="post" enctype="multipart/form-data">
  <table id="table1" class="table table-striped table-hover table-sm" when-scrolled="ctrl.more()" style="width: 100%;">
    <thead class="thead-dark">
      <tr>
        <th scope="col" ng-click="ctrl.ToggleOrder('metadata.name')"><strong translate lib="web">name</strong></th>
        <th scope="col" ng-click="ctrl.ToggleOrder('metadata.path')"><strong translate lib="web">path</strong></th>
        <th scope="col" ng-click="ctrl.ToggleOrder('contentType')"><strong translate lib="web">type</strong></th>
        <th scope="col" ng-click="ctrl.ToggleOrder('metadata._createdby')"><strong translate lib="web">createdby</strong></th>
        <th scope="col" ng-click="ctrl.ToggleOrder('metadata._created')"><strong translate lib="web">created</strong></th>
        <th scope="col" ng-click="ctrl.ToggleOrder('length')"><strong translate lib="web">size</strong></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="model in ctrl.models">
        <td>{{model.metadata.name}}</td>
        <td>{{model.metadata.path}}</td>
        <td>{{model.contentType}}</td>
        <td>{{model.metadata._createdby}}</td>
        <td>
          <timesince ng-model="model.metadata._created" />
        </td>
        <td>
          <format-bytes ng-model="model.length" />
        </td>
        <td class="btn-cell">
          <a ng-href="/download/{{model._id}}" class="table-btn">
            <em class="fas fa-file-download"></em>
          </a>
        </td>
        <td class="btn-cell">
          <a ng-href="#/Entity/{{ctrl.collection}}/{{model._id}}" class="table-btn"><em class="fas fa-edit"></em></a>
        </td>
        <td class="btn-cell">
          <a href ng-click="ctrl.DeleteOne(model)" ng-disabled="ctrl.loading==true" class="table-btn"><em
              class="fas fa-trash"></em></a>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Upload</td>
        <td colspan="4">
          <!-- <input type="file" ng-disabled="ctrl.loading==true" class="btn upload-btn" ng-model="ctrl.file"
          fileread></button> -->
          <input type="file" name="fileupload" id="fileupload" multiple>
        </td>
        <td colspan="3">
          <!-- <input type="button" ng-disabled="ctrl.loading==true" ng-click="ctrl.Upload()" value="Upload"></input> -->
          <input type="button" ng-disabled="ctrl.loading==true" ng-click="ctrl.Upload()" value="Upload"></input>
          <!-- <input type="submit" value="Upload" name="submit"> -->
          <!-- <input type="button" ng-disabled="ctrl.loading==true" ng-click="ctrl.Upload_usingapi()"
            value="Upload"></input> -->
        </td>
      </tr>
    </tfoot>
  </table>
</form>
<div id="myProgress">
  <div id="myBar"></div>
</div>